<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
{% load staticfiles %}
<meta charset="UTF-8" />
<title>Búsqueda Avanzada</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, , initial-scale=1.0">

<link href="http://livedemo00.template-help.com/opencart_49582/image/data/favicon.png" rel="icon" />

<link href="{% static 'css/monster/bootstrap.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/cloud-zoom.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/stylesheet.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/font-awesome.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/slideshow.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/jquery.prettyPhoto.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/camera.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/superfish.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/responsive2.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/photoswipe.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/jquery.bxslider.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/colorbox.css' %}" rel="stylesheet" type="text/css"  media="screen" />
<link href="{% static 'css/monster/jquery-ui-1.8.16.custom.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/monster/jquery.fancybox-1.3.4.css' %}" rel="stylesheet" type="text/css" media="screen" />
<link href="{% static 'css/monster/livesearch.css' %}" rel="stylesheet" type="text/css" />
<link href='//fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Roboto+Slab:400,700,100,300' rel='stylesheet' type='text/css'>

<script src="{% static 'js/monster/jquery-1.10.2.min.js' %}"></script>
<script src="{% static 'js/monster/jquery-migrate-1.2.1.min.js' %}"></script>
<script src="{% static 'js/monster/jquery-ui-1.8.16.custom.min.js' %}"></script>
<script src="{% static 'js/monster/jquery.cookie.js' %}"></script>
<script src="{% static 'js/monster/jquery.fancybox-1.3.4.pack.js' %}"></script>
<script src="{% static 'js/monster/jquery.colorbox.js' %}"></script>
<script src="{% static 'js/monster/jquery.jcarousel.min.js' %}"></script>
<script src="{% static 'js/monster/jquery.cycle.js' %}"></script>
<script src="{% static 'js/monster/bootstrap.js' %}"></script>
<script src="{% static 'js/monster/tabs.js' %}"></script>
<script src="{% static 'js/monster/jQuery.equalHeights.js' %}"></script>
<script src="{% static 'js/monster/jquery.elevatezoom.js' %}"></script>
<script src="{% static 'js/monster/jquery.prettyPhoto.js' %}"></script>
<script src="{% static 'js/monster/jscript_zjquery.anythingslider.js' %}"></script>
<script src="{% static 'js/monster/jquery.nivo.slider.pack.js' %}"></script>
<script src="{% static 'js/monster/jquery.mobile-events.js' %}"></script>
<script src="{% static 'js/monster/superfish.js' %}"></script>
<script src="{% static 'js/monster/script.js' %}"></script>
<script src="{% static 'js/monster/camera.js' %}"></script>
<script src="{% static 'js/monster/common.js' %}"></script>
<!-- bx-slider -->
<script src="{% static 'js/monster/jquery.bxslider.js' %}"></script>
<!-- photo swipe -->
<script src="{% static 'js/monster/klass.min.js' %}"></script>
<script src="{% static 'js/monster/code.photoswipe.jquery-3.0.5.js' %}"></script>
<!--<script src="{% static 'js/monster/jquery.total-storage.min.js' %}"></script>-->

<!--[if IE]>
<script src="catalog/view/theme/theme415/js/html5.js"></script>
<![endif]-->
<!--[if lt IE 8]><div style='clear:both;height:59px;padding:0 15px 0 15px;position:relative;z-index:10000;text-align:center;'><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a></div><![endif]-->
<!--[if IE]>
<script src="catalog/view/theme/theme415/js/sl/jscript_zjquery.anythingslider.js"></script>
<![endif]-->
<!--[if  IE 8]>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/theme415/stylesheet/ie8.css" />
<![endif]-->
<!--[if  IE 8]>
<script src="catalog/view/theme/theme415/js/respond.js"></script>
<![endif]-->
<!--[if  IE 8]>
<script src="catalog/view/theme/theme415/js/matchmedia.polyfill.js"></script>
<![endif]-->
<!--[if  IE 8]>
<script  src="catalog/view/theme/theme415/js/matchmedia.addListener.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/theme415/stylesheet/ie6.css" />
<script type="text/javascript" src="catalog/view/javascript/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('#logo img');
</script>
<![endif]-->

<script type"application/javascript">
	window.onload = function() {
	   document.getElementById('title').onkeypress = function(e) {
	       enter( e);
	   };
	   document.getElementById('actor').onkeypress = function(e) {
	       enter( e);
	   };
	   document.getElementById('director').onkeypress = function(e) {
	       enter( e);
	   };
	   document.getElementById('age').onkeypress = function(e) {
	       enter( e);
	   };
	   document.getElementById('genre').onkeypress = function(e) {
	       enter( e);
	   };
	   document.getElementById('hasta').onkeypress = function(e) {
	       enter( e);
	   };
	   document.getElementById('desde').onkeypress = function(e) {
	       enter( e);
	   };
	   document.getElementById('premiere').onkeypress = function(e) {
	       enter( e);
	   };
	   if ('{{genre}}' != '') {
		   document.getElementById('genre').value = '{{genre}}';
		}
		if ('{{age}}' != '') {
	   		document.getElementById('age').value = '{{age}}';
	   	}
	};
	function desde() {
		if(document.getElementById("hasta").value == "") {
			document.getElementById("hasta").value = document.getElementById("desde").value;
		}
	}
	function hasta() {
		if(document.getElementById("desde").value == "") {
			document.getElementById("desde").value = document.getElementById("hasta").value;
		}
	}

	function enter(e) {
		var ev = e || window.event;
		var key = ev.keyCode;

		if (key == 13)
		{
			buscar();
		}
	}

	function vaciar() {
		document.getElementById("title").value = '';
		document.getElementById("actor").value = '';
		document.getElementById("director").value = '';
		document.getElementById("genre").value = '0';
		document.getElementById("age").value = '0';
		document.getElementById("desde").value = '';
		document.getElementById("hasta").value = '';
		document.getElementById("premiere").checked = false;
	}

	function buscar() {
		vacio = true;
		url ="?"
		if(document.getElementById("title").value != "") {
			if(!vacio) {
				url += '&';
			}
			url += 'title=' + document.getElementById("title").value
			vacio = false;
		}
		if(document.getElementById("actor").value != "") {
			if(!vacio) {
				url += '&';
			}
			url += 'actor=' + document.getElementById("actor").value;
			vacio = false;
		}
		if(document.getElementById("director").value != "") {
			if(!vacio) {
				url += '&';
			}
			url += 'director=' + document.getElementById("director").value;
			vacio = false;
		}
		if(document.getElementById("desde").value != "") {
			if(!vacio) {
				url += '&';
			}
			url += 'fromyear=' + document.getElementById("desde").value;
			vacio = false;
		}
		if(document.getElementById("hasta").value != "") {
			if(!vacio) {
				url += '&';
			}
			url += 'toyear=' + document.getElementById("hasta").value;
			vacio = false;
		}
		var e1 = document.getElementById("genre");
		var genre = e1.options[e1.selectedIndex].value;
		if(genre != '0') {
			if(!vacio) {
				url += '&'
			}
			url += 'genre=' + genre;
			vacio = false;
		}
		var e2 = document.getElementById("age");
		var age = e2.options[e2.selectedIndex].value;
		if(age != '0') {
			if(!vacio) {
				url += '&'
			}
			url += 'age=' + age;
			vacio = false;
		}

		if(document.getElementById("premiere").checked) {
			if(!vacio) {
				url += '&';
			}
			url += 'premiere=true';
			vacio = false;
		}
		window.location.href = "{% url 'busqueda' %}" + url;

	}
</script>

<script>
	if (navigator.userAgent.match(/Android/i)) {
		var viewport = document.querySelector("meta[name=viewport]");
	}
	if(navigator.userAgent.match(/Android/i)){
		window.scrollTo(0,1);
	}
</script> 

</head>

<body class="product-search">
<div id="body">
	{% include 'monster/headermovil.html' %}
		<div id="page">
			<div id="shadow">
				<div class="shadow"></div>
				{% include 'monster/header.html' %}
		<section>
			<div id="container">
				<p id="back-top"> <a href="#top"><span></span></a> </p>
					<div class="container">
						<div id="notification"></div>
							<div class="row">
								<div class="col-sm-9 col-sm-12" id="content">  
									<div class="breadcrumb">
										<a href="{% url 'monster' %}">Home</a>
										&raquo; <a>Búsqueda</a>
									</div>
	  
									<h1>Búsqueda avanzada:</h1>
									<div class="box-container">
									  <!--<b style=" padding-bottom:7px; display:block;"> Criterios de búsqueda</b>-->
									    <div class="content">
											<div>
												<h3></h3>
												<div class="form-group">
													<input id="title" type="text" placeholder="Título" name="search" value="{{title}}" />
												</div>
												
												<div class="form-group">
													<input id="director" type="text" placeholder="Director" name="search" value="{{director}}" />
												</div>
												
												<div class="form-group">
													<input id="actor" type="text" placeholder="Actor" name="search" value="{{actor}}" />
												</div>
												
												<div class="form-group">
													<select id="genre">
														<option value="0">Género</option>
														{% for genre in genres %}
														<option value="{{genre.genreName}}">{{genre.genreName}}</option>
														{% endfor %}
													</select>
												</div>
                                                <div class="form-group">
													<select id="listas">
														<option value="0">Listas</option>
														<option value="">San Valentín</option>
                                                        <option value="">Navidad</option>
														<option value="">Halloween</option>
													</select>
												</div>
												
												<div class="form-group">
													<input value="{{fromyear}}" placeholder="Desde (año)" id="desde" type="text" onchange="desde();"/>   
													<input value="{{toyear}}" placeholder="Hasta (año)" id="hasta" onchange="hasta();" type="text"/>
											    </div>
											
												<!--<div class="form-group">
														<div class="checkbox">
														<label for="sub_category">
																		<input type="checkbox" name="sub_category" value="1" id="sub_category" />
																		Sólo estrenos</label>
														</div>
												</div>-->
            
												<div class="form-group">
													<div class="" >
                                                        <input type="radio" name="description" value="1" id="premiere" />
														<label style="font-weight: normal !important;" for="description">Sólo estrenos</label> 
                                                        <input type="radio" name="description" value="1" id="premiere" />
                                                        <label style="font-weight: normal !important;" for="description">Sólo fondo	</label>
                                                           
													</div>
                                                 
												</div>
            
												<!--<div class="form-group">
													<select id="age">
														<option value="0">Edad recomendada</option>
														{% for edad in edades %}
														<option value="{{edad}}">{{edad}}</option>
														{% endfor %}
													</select>
												</div>-->
                                                <label> Edad Recomendada: </label>
                                                <div class="form-group">
														<div class="checkbox">
														<label for="sub_category">
																		<input type="checkbox" name="sub_category" value="1" id="sub_category" />
																		Todos los públicos</label>
														</div>
                                                        <div class="checkbox">
														<label for="sub_category">
																		<input type="checkbox" name="sub_category" value="1" id="sub_category" />
																		+7</label>
														</div>
                                                        <div class="checkbox">
														<label for="sub_category">
																		<input type="checkbox" name="sub_category" value="1" id="sub_category" />
																		+13</label>
														</div>
                                                        <div class="checkbox">
														<label for="sub_category">
																		<input type="checkbox" name="sub_category" value="1" id="sub_category" />
																		+16</label>
														</div>
                                                        <div class="checkbox">
														<label for="sub_category">
																		<input type="checkbox" name="sub_category" value="1" id="sub_category" />
																		+18</label>
														</div>
												</div>
                                                
                                                
                                                
                                                
											</div>
										</div>
    
										<div class="buttons">
										   <div class="right"><a onclick="vaciar();" class="button"><span>Limpiar campos</span></a></div>
										   <div class="right"><a onclick="buscar();" style="margin-right: 10px;"  class="button"><span>Buscar</span></a></div>
										</div>
									</div>
  
									<h2>RESULTADOS</h2>
									{% if peliculas %}
									<div class="product-grid">
												<ul class="row">
												{% for m in peliculas %}
													<li class="col-sm-3">
														<div class="padding">
															<div class="image">
															<a href="{% url 'infoPeli' m.id_XML %}">
															<img id="img_m.id_XML" height="276" width="195" onerror="if (this.src != '{% static 'images/portadaVaciaGrande.png' %}') this.src = '{% static 'images/portadaVaciaGrande.png' %}';" src="{{m.artwork}}" title="{{m.title}}" alt="{{m.title}}" /></a>
															</div>
															<div class="left">
																<div class="name">
																	<a href="{% url 'infoPeli' m.id_XML %}">{{m.title}}</a>
																</div>
																<div class="rating">
																	<img height="13" src="{% static 'images/stars-5.png' %}" alt="Based on 1 reviews." />
																</div>
																<div class="description">{{m.plot}}</div>
																<div class="price">
																 </br>
																</div>
																<div class="cart-button">
																	<div class="cart">
																		<a class="button" title="Obtener código"><span>Obtener código</span></a>
																	</div>
																	<div class="clear"></div>
																</div>
															</div>
														  
														</div>
													</li>
												{% endfor %}
												</ul>
											</div>
  
											<div class="pagination">
												<div class="links">
													
													{% if peliculas.has_previous %}
													<a href="{% url 'busqueda' %}?{{busqueda}}page=1">|&lt;</a>
											            <a href="{% url 'busqueda' %}?{{busqueda}}page={{ peliculas.previous_page_number }}">&lt;</a>
											            <a href="{% url 'busqueda' %}?{{busqueda}}page={{ peliculas.previous_page_number }}">{{peliculas.previous_page_number}}</a>
											        {% endif %}
													<b>{{ peliculas.number }}</b>  
													{% if peliculas.has_next %}
														<a href="{% url 'busqueda' %}?{{busqueda}}page={{ peliculas.next_page_number }}">{{peliculas.next_page_number}}</a>
											            <a href="{% url 'busqueda' %}?{{busqueda}}page={{ peliculas.next_page_number }}">&gt;</a>
											            <a href="{% url 'busqueda' %}?{{busqueda}}page={{ peliculas.paginator.num_pages }}">&gt;|</a>
											        {% endif %}
											        
												</div>
												<div class="results">Mostrando página {{ peliculas.number }} de {{ peliculas.paginator.num_pages }}</div>
											</div>
									{% else %}
										<div class="content">No existen resultados para esta búsqueda</div>
									{% endif %}
								</div>

								
								<aside class="col-sm-3" id="column-right">
									{% for n in novedad %}
										<div class="box bestsellers">
											<div class="box-heading">{% if forloop.first %}Novedades{% endif %}</div>
											<div class="box-content">
												<div class="box-product">
													<ul class="row">
														<li class="first-in-line last_line col-sm-3">
															<div class="padding">
																<div class="image2">
																	<a href="{% url 'infoPeli' n.id_XML %}">
																	<img id="img_{{n.id_XML}}" onerror="if (this.src != '{% static 'images/portadaVaciaGrande.png' %}') this.src = '{% static 'images/portadaVaciaGrande.png' %}';" src="{{n.artwork}}" alt="{{n.title}}" /></a>					
																</div>
																<div class="inner">
																	<div class="name maxheight-best">
																		<a href="{% url 'infoPeli' n.id_XML %}">{{n.title}}</a>
																	</div>
																	<div class="price">
																		<span class="price-new"></span>
																	</div>
																				
																	<div class="f-left">
																		<div class="cart-button">
																			<div class="cart">
																				<a title="Obtener Código" data-id="{{n.id_XML}};" class="button addToCart">
																					<span>Obtener Código</span>
																				</a>
																			</div>
																			
																			<span class="clear"></span>
																		</div>
																		<div class="clear"></div>
																	</div>
																</div>
																<div class="clear"></div>
															</div>
														</li>
													</ul>
												</div>
											</div>
										</div>
									{% endfor %}
								</aside>						
									
									

  <script type="text/javascript">
		(function($){$.fn.equalHeights=function(minHeight,maxHeight){tallest=(minHeight)?minHeight:0;this.each(function(){if($(this).height()>tallest){tallest=$(this).height()}});if((maxHeight)&&tallest>maxHeight)tallest=maxHeight;return this.each(function(){$(this).height(tallest)})}})(jQuery)
	$(window).load(function(){
		if($(".maxheight-best").length){
		$(".maxheight-best").equalHeights()}
	})
	</script>



    <script type="text/javascript">
		(function($){$.fn.equalHeights=function(minHeight,maxHeight){tallest=(minHeight)?minHeight:0;this.each(function(){if($(this).height()>tallest){tallest=$(this).height()}});if((maxHeight)&&tallest>maxHeight)tallest=maxHeight;return this.each(function(){$(this).height(tallest)})}})(jQuery)
	$(window).load(function(){
		if($(".maxheight").length){
		$(".maxheight").equalHeights()}
	})
</script>

<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.new-products  li ').last().addClass('last');
});
}); 
</script>
	

  
<script type="text/javascript"><!--

$('#content input[name=\'search\']').keydown(function(e) {
	if (e.keyCode == 13) {
		$('#button-search').trigger('click');
	}
});

$('select[name=\'category_id\']').bind('change', function() {
	if (this.value == '0') {
		$('input[name=\'sub_category\']').attr('disabled', 'disabled');
		$('input[name=\'sub_category\']').removeAttr('checked');
	} else {
		$('input[name=\'sub_category\']').removeAttr('disabled');
	}
});

$('select[name=\'category_id\']').trigger('change');

$('#button-search').bind('click', function() {
	url = 'index.php?route=product/search';
	
	var search = $('#content input[name=\'search\']').attr('value');
	
	if (search) {
		url += '&search=' + encodeURIComponent(search);
	}

	var category_id = $('#content select[name=\'category_id\']').attr('value');
	
	if (category_id > 0) {
		url += '&category_id=' + encodeURIComponent(category_id);
	}
	
	var sub_category = $('#content input[name=\'sub_category\']:checked').attr('value');
	
	if (sub_category) {
		url += '&sub_category=true';
	}
		
	var filter_description = $('#content input[name=\'description\']:checked').attr('value');
	
	if (filter_description) {
		url += '&description=true';
	}

	location = url;
});

function display(view) {
	if (view == 'list') {
		$('.product-grid ').attr('class', 'product-list');
		$('.product-list ul').removeClass('row');
		$('.product-list ul li').removeClass('col-sm-4');
		$('.product-list ul li').each(function(index, element) {
			html = '';
					html += '<div class="row">';
			var image = $(element).find('.image').html();
			
			if (image != null) {
				html += '<div class="image col-sm-3">' + image + '</div>';
			}
			html += '<div class="left col-sm-9">';
				html += '<div class="name">' + $(element).find('.name').html() + '</div>';
				var rating = $(element).find('.rating').html();
				if (rating != null) {
					html += '<div class="rating">' + rating + '</div>';
				}
				html += '<div class="description">' + $(element).find('.description').html() + '</div>';
				var price = $(element).find('.price').html();
				if (price != null) {
					html += '<div class="price">' + price  + '</div>';
				}
				html += '<div class="cart-button">';
				html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
				html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
				html += '<div class="compare">' + $(element).find('.compare').html() + '</div>';
				html += '<div class="clear">' + $(element).find('.clear').html() + '</div>';
				html += '</div>';
				
				html += '</div>';
				html += '</div>';
			

						
			$(element).html(html);
		});		
		
		$('.display').html('<b>Display:</b> <div id="list_b"><i class="fa fa-list"></i></div> <a id="grid_a" onclick="display(\'grid\');"><i class="fa fa-th"></i></a>');
		
		$.totalStorage('display', 'list'); 
	} else {
		$('.product-list').attr('class', 'product-grid');
		$('.product-grid ul').addClass('row');
		$('.product-grid ul li').addClass('col-sm-4');
		$('.product-grid ul li').each(function(index, element) {
			html = '';
					
			var image = $(element).find('.image').html();
			html += '<div class="padding">';
			if (image != null) {
				html += '<div class="image">' + image + '</div>';
			}
			html += '<div class="left">';
		
			
			
			
			html += '<div class="name">' + $(element).find('.name').html() + '</div>';
			var rating = $(element).find('.rating').html();
			
			if (rating != null) {
				html += '<div class="rating">' + rating + '</div>';
			}
			var price = $(element).find('.price').html();
			
			if (price != null) {
				html += '<div class="price">' + price  + '</div>';
			}
			html += '<div class="description">' + $(element).find('.description').html() + '</div>';
			
			
			html += '<div class="cart-button">';
			html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
			html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
			html += '<div class="compare">' + $(element).find('.compare').html() + '</div>';
			html += '<div class="clear">' + $(element).find('.clear').html() + '</div>';
			html += '</div>';
			
			
			html += '</div></div>';
			$(element).html(html);
		});	
					
		$('.display').html('<b>Display:</b> <a id="list_a" onclick="display(\'list\');"><i class="fa fa-list"></i></a>  <div id="grid_b"><i class="fa fa-th"></i></i></div>');
		
		$.totalStorage('display', 'grid');
	}
	if ($('.container').width() > 800) {
	// tooltip demo
		$('.tooltip-toggle').tooltip({
		selector: "a[data-toggle=tooltip]"
		})
		$('.tooltip-1').tooltip({
			placement:'bottom'
		})
		$('.tooltip-2').tooltip({
			placement:'top'
		})
		}
	
}

view = $.totalStorage('display');

if (view) {
	display(view);
} else {
	display('grid');
}
//-->
</script> 



<div class="clear"></div>
</div>
</div>
</div>
<div class="clear"></div>
</section>

{% include 'monster/footer.html' %}

</div>
</div>
</div>

</body></html>